<template>
  <div class="type_index">
    <img class="platform_type" :src="imagePath" alt="" />
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  type: {
    required: String,
    default: "",
  },
});
// 处理方法
const init = async (val) => {
  if (!val) return;
  const module = await import(`@/assets/images/${val}.png`);
  imagePath.value = module.default;
};
watch(
  () => props.type,
  async (val) => {
    await init(val);
  }
);
const imagePath = ref("");

onMounted(async () => {
  try {
    await init(props.type);
  } catch (error) {
    console.error("Image not found:", error);
  }
});
</script>

<style scoped lang="scss">
.type_index {
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  .platform_type {
    vertical-align: middle;
    transform: scale(0.5);
  }
}
</style>
